<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>运动中</title>
		<script type="text/javascript">
			window._AMapSecurityConfig = {
				securityJsCode: "4cf95ab4cdae16545e0f28aa52c68e2b",
			};
		</script>
		<script
			type="text/javascript"
			src="https://webapi.amap.com/maps?v=2.0&key=3d27c2d6ab2aa3ef82e2aab483380359"
		></script>
	</head>
	<body>
		<!-- 头部 -->
		<header>
			<!-- 左边文字 -->
			<div class="head-left">
				<p>户外跑</p>
				<p class="sporting-text">运动中</p>
			</div>
			<!-- 右边图标 -->
			<div class="head-right">
				<span class="iconfont">&#xe6b2;</span
				><span class="iconfont">&#xe61d;</span>
			</div>
		</header>
		<!-- 公里数 -->
		<section class="males"><span id="distance">99.99</span>公里</section>
		<!-- gps -->
		<section class="gps">
			<p>GPS信号度低,数据精准度低</p>
			<div>&emsp;</div>
			<span class="iconfont">&#xe612;</span>
		</section>
		<!-- 时间列表 -->
		<section class="time-list">
			<div class="speed">
				<span class="iconfont">&#xe6ac;</span>
				<p>配速</p>
				<p><span id="speed">--</span> 米/秒</p>
			</div>
			<div class="time">
				<span class="iconfont">&#xe665;</span>
				<p>用时</p>
				<p id="time">00:00:20</p>
			</div>
			<div class="calorie">
				<span class="iconfont">&#xe61b;</span>
				<p>千卡</p>
				<p id="calorie">3000</p>
			</div>
		</section>
		<!-- 暂停 -->
		<section class="time-out">
			<div class="parse">
				<span class="iconfont on">&#xea81;</span>
				<p>暂停</p>
			</div>
			<div class="continue">
				<span class="iconfont">&#xe65f;</span>
				<p>继续</p>
			</div>
			<div class="stop">
				<span class="iconfont">&#xe628;</span>
				<p>结束</p>
			</div>
			<div class="lock"><span class="iconfont">&#xe6e6;</span></div>
		</section>
	</body>
</html>
